<template>
	<view class="mt-2">
		<view class="d-flex a-center py-2 boroder-bottom bg-white">
			<text class="font-md text-dark px-2">姓名:</text>
			<input type="text" class="flex-1 ml-2" v-model="formData.realname" placeholder="请输入姓名" />
		</view>
		<view class="d-flex a-center py-2 boroder-bottom bg-white">
			<text class="font-md text-dark px-2">手机:</text>
			<input type="text" class="flex-1 ml-2" v-model="formData.phone" placeholder="请输入手机号" />
		</view>
		<view class="d-flex a-center py-2 boroder-bottom bg-white">
			<text class="font-md text-dark px-2">区域:</text>
			<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
				{{ formData.region }}
			</pick-regions>

		</view>
		<view class="d-flex a-center py-2 boroder-bottom bg-white">
			<text class="font-md text-dark px-2">区域编码：{{ defaultRegionCode }}</text>
		</view>
		<view class="d-flex a-center py-2 boroder-bottom bg-white">
			<text class="font-md text-dark px-2">地址:</text>
			<input type="text" class="flex-1 ml-2" v-model="formData.detail" placeholder="请输入详细地址" />
		</view>
		<view class="mt-2 px-2">
			<button type="warn" plain @click="onSubmit">保存</button>

		</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted,
	reactive,
	computed
} from 'vue'
import {
	onLoad
} from '@dcloudio/uni-app'
// import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
import pickRegions from '@/components/pick-regions/pick-regions.vue'
import {useAddressStore} from '@/stores/address.js'
const addressStore = useAddressStore()	

const index = ref('')
const formData = reactive({
	id: "",
	realname: '',
	phone: '',
	detail: '',
	region: '',
	regionCode: ''
})
onLoad((options) => {
	if (options && options.index !== undefined) {
		index.value = parseInt(options.index, 10)
	}
})
onMounted(() => {
	if (index.value == '-1') {
		uni.setNavigationBarTitle({
			title: '新增地址'
		})
	} else {
		uni.setNavigationBarTitle({
			title: '编辑地址'
		})
		Object.assign(formData, addressStore.address)
	}
})

const defaultRegion = computed(() => {
	if (formData.region) {
		return formData.region.split(' ')
	} else {
		return ['上海市', '市辖区', '黄浦区']
	}
})
const defaultRegionCode = computed(() => {
	if (formData.regionCode) {
		return formData.regionCode
	} else {
		return '3101'
	}
})
const handleGetRegion = (region) => {
	region.value = region
	formData.region = region.value.map(item => item.name).join(' ')
	formData.regionCode = region.value.map(item => item.code).join('')
}
const onSubmit = () => {
	uni.$emit('address-edit', { "address": formData })
	uni.navigateBack()
}


</script>

<style></style>